<template>
  <view class="i_container">
    <view class="tabs">
      <custom-tabs :tabs="tabsList"
					:active="activeIndex"
					@change="tabChange"></custom-tabs>
    </view>
    <view class="i_list"
          v-if="noticeList.length > 0">
      <view class="news_box"
            v-for="(item, index) in noticeList"
            :key="index">
        <view class="news_time">
          <text class="i_time">{{item.gmtCreate}}</text>
        </view>
        <custom-card :footer="true"
                     :header="true">
          <template v-slot:card-header>
            <text class="i_title" :class="{unRead: activeIndex == 1 && item.msgRead == 0}">{{item.msgTitle}}</text>
          </template>
          <view>
            <text class="i_content">{{item.msgContent}}</text>
          </view>
          <template v-slot:card-footer>
            <view class="footer_txt" @click="jumpTo(item)">
              <text>{{activeIndex == 1 ? '点击前往' : '详情'}}</text>
            </view>
          </template>
        </custom-card>
      </view>
    </view>
    <view class="stu_btn"
          v-else>
      <text class="stu_item_txt">目前还没有记录!</text>
    </view>
	<tmcModal :isShow="showMcModal" :showCancel="false" :content="content" :title="title"></tmcModal>
  </view>
</template>

<script>
	let _this;
import { queryNewsList2, readTo } from '../../common/api/index.js';
import { _showLoading } from '../../common/js/util.js'
import tmcModal from '../../components/custom-modal/mc-modal.vue'
export default {
  onLoad: function (option) {
	 _this = this
	this.stulist = JSON.parse(option.stulist)
    this.orgId =  this.stulist[0].orgId
	// #ifdef APP-PLUS
	switch (uni.getSystemInfoSync().platform) {
	  case 'android':
		console.log('运行Android上')
		this.portalCode = 'POC_APP_ANDRIOD'
		break;
	  case 'ios':
		console.log('运行iOS上')
		this.portalCode = 'POC_APP_APPLE'
		break;
	  default:
		console.log('运行在开发者工具上')
		break;
	}
	// #endif
  },
  data() {
    return {
      activeIndex: 0,
      noticeList: [],
	  stulist:[],
      orgId: '',
      height: '600rpx',
      tabsList: [{
        title: '通知公告',
		badge: 0
      }, {
        title: '消息提醒',
		badge: 0
      }],
	  showMcModal: false,
	  title: '',
	  content: '',
	  portalCode: ''
    }
  },
  components: {
	  tmcModal
  },
  onShow: function () {
    let _that = this;
    uni.getSystemInfo({
		success: function (res) {
			_that.height = res.windowHeight + 'px';
		}
    })
    this.onLoadNews()
  },
  methods: {
    jumpTo(obj) {
      if (this.activeIndex == 1) {
        readTo({
          orgId: obj.orgId,
          msgIds: [`${obj.msgId}`]
        }).then(res => {
          if (obj.msgSource == 1) {
            uni.navigateTo({
              url: '/pagePayment/recode/rechargeRecode?walletObj=' + encodeURIComponent(JSON.stringify(obj))
            })
          } else if (obj.msgSource == 2) {
			const stulist = [{
				orgId: obj.orgId,
				empId: obj.empId
			}]
			const date = obj.gmtModify.substr(0,7).split("-")
            uni.navigateTo({
              url: '/pagePayment/payment/jfRecode?stulist=' + JSON.stringify(stulist) + '&date=' + JSON.stringify(date) + '&billNo=' + obj.clientBillNo
            })
          } else if(obj.msgSource == 5) {
			uni.navigateTo({
				url: '/pagePayment/recode/xf_list?orgId='+obj.orgId + '&empId=' + obj.empId
			})
          } else if(obj.msgSource == 6) {
			uni.navigateTo({
				url: './detail1?memo=' + encodeURIComponent(obj.memo)
			})
          }  else {}
        }).catch(err => {
          console.log(err)
        })

      } else {
        uni.navigateTo({
          url: './detail?obj=' + encodeURIComponent(JSON.stringify(obj))
        })
      }

    },
    tabChange(e) {
      this.noticeList = []
      this.activeIndex = e.index;
      this._changeNewsList(this.activeIndex)
    },
	// 切换信息类型
    _changeNewsList(index) {
      _showLoading('加载中,请稍后…')
	  let data = []
	  this.stulist.forEach((item)=>{
		let stu = {
	  		...item,
			currentPage: 1,
			pageSize: 50,
			msgType: index,
			// #ifdef MP-ALIPAY
			portalCode: 'POC_ZFB_APPLET'
			// #endif
			// #ifdef H5
			portalCode: 'POC_WX_OPENPLAFORM'
			// #endif
			// #ifdef MP-WEIXIN
			portalCode: 'POC_WX_APPLET'
			// #endif
			// #ifdef APP-PLUS
			portalCode: this.portalCode
			// #endif
	  	}
		if(index == 0){
			 delete stu.empId
			 delete stu.portalCode
		}
	  	data.push(stu)
		_this._queryNewsList(data)
	  })
    },
	// 信息查找
	_queryNewsList(data){
		queryNewsList2(data).then(res => {
		  if (res.code == 0) {
		    this.noticeList = res.data;
		    this.tabsList[data[0].msgType].badge = this.noticeList.filter(e => { return e.msgRead == 0 }).length//设置当前未读角标
		    uni.hideLoading()
		  } else {
		    uni.hideLoading()
			this.title = '温馨提示'
			this.content = res.msg
			this.showMcModal = true
		  }
		}).catch(err => {
		  uni.hideLoading()
		  console.log(err)
		})
	},
	// 首次加载信息
	onLoadNews(){
		for (let i = this.tabsList.length - 1; i >= 0; i--) {
			this._changeNewsList(i)
		}
		this.activeIndex = 0
	}
  }
}
</script>

<style lang="scss">
page {
  font-family: "PingFangSC-Semibold", "PingFang SC";
  background-color: rgb(243, 243, 243);
  height: 100vh;
}
.i_container {
  .tabs {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .i_list {
    padding: 0 32rpx 32rpx;
    .news_box {
      .news_time {
        text-align: center;
        font-size: $font-size-base;
        color: #999999;
        line-height: 34rpx;
        padding: 40rpx 32rpx 32rpx;
        .i_time {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(204, 201, 201, 1);
        }
      }
      .i_content {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: $font-size-lg;
        color: #6b707a;
        line-height: 40rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
  .stu_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
    .stu_item_txt {
      font-family: "Arial Normal", "Arial";
      font-weight: 400;
      font-size: $font-size-base;
      color: #d9d9d9;
    }
  }
}
.i_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  border-bottom: 1px solid #dddddd;
}
.i_btn {
  padding: 10rpx 0;
}
.news_card {
  height: 380rpx;
  background: #ffffff;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}
.card_head,
.card_footer {
  height: 100rpx;
  padding: 0 28rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  font-weight: 600;
  position: relative;
}
.card_footer {
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  color: #185aff;
}
.i_title {
  font-family: "PingFangSC";
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.unRead::before {
  content: 'new';
  padding: 2rpx 6rpx;
  background: #e02020;
  border-radius: 8rpx;
  color: #fff;
  margin-right: 16rpx;
}
</style>
